<template>
  <div>
    <header>
      <van-button
        round
        type="info"
        icon="search"
        color="rgba(255,255,255,.3)"
        @click="$router.push('/search')"
        >搜索</van-button
      >
    </header>
    <van-tabs v-model="channel_id" animated swipeable sticky>
      <van-tab
        :name="item.id"
        :title="item.name"
        v-for="item in tabList"
        :key="item.id"
      >
        <Content :channel_id="channel_id"></Content>
      </van-tab>
      <template #nav-right>
        <van-icon name="wap-nav" class="icon" @click="target" />
      </template>
    </van-tabs>
  </div>
</template>

<script>
import { list } from '@/api/channel.js'
import Content from '@/components/content.vue'
export default {
  components: {
    Content
  },
  data () {
    return {
      channel_id: JSON.parse(localStorage.getItem('id')) || 0, // 频道id
      tabList: [],
      pre_timestamp: null
    }
  },
  methods: {
    target () {
      localStorage.setItem('id', JSON.stringify(this.channel_id))
      this.$router.push('/channel')
    }
  },
  // router.beforeResolve((to, from, next) => {
  //   console.log(to);
  // }),
  async created () {
    const {
      data: {
        data: { channels }
      }
    } = await list()
    this.tabList = channels
  }
}
</script>

<style lang="less" scoped>
header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 128px;
  padding-bottom: 13px;
  background-color: #3399ff;
  box-sizing: border-box;
  .van-button {
    width: 560px;
    height: 66px;
    border: none;
    font-size: 28px;
  }
  .van-button__icon {
    font-size: 32px;
  }
}
/deep/.van-sticky {
  padding-top: 128px;
}
/deep/.van-tabs--line .van-tabs__wrap {
  border-bottom: 1px solid rgb(235, 235, 235);
}
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
  padding: 0 67px 0 0;
}
/deep/.van-tab {
  width: 200px !important;
  border-left: 1px solid rgb(235, 235, 235);
}
/deep/.van-tabs__line {
  width: 31px;
  height: 6px;
  background-color: #3399ff;
  bottom: 9px;
}
/deep/.van-cell__value {
  display: flex;
  .van-image {
    flex: 1;
  }
}
.icon {
  position: fixed;
  right: 0;
  top: 142px;
  width: 67px;
  height: 58px;
  text-align: center;
  line-height: 58px;
  font-size: 40px;
  border-left: 1px solid rgb(235, 235, 235);
  background-color: #fff;
}
/deep/.van-cell {
  font-size: 32px;
  padding-bottom: 70px;
}
</style>
